<script setup>
import {ref, reactive,} from "vue";
import {useUserStore} from "@/stores/user";
import 'vue3-emoji/dist/style.css'
import request from "@/utils/request";

const userStore = useUserStore()
const user = userStore.getUser
const text = ref('')
const messages = ref([]) // 聊天输入的内容
const avatar = ref('')
if (user.avatar) {
  avatar.value = user.avatar
}

const state = reactive({
  tableData: [],
  form: {} ,// 绑定表单类容
  addfriends: [],
  message:[],
})

// 获取当前用户所有好友
const load = () => {
  request.get('/friends/hot', {
    params: {
      pageNum: 1,
      pageSize: 20
    }
  }).then(res => {
    state.addfriends = res.data.records
    console.log(res.data.records)
  })
}

load()

</script>

<template>
  <div>
  <div style="background-color: white; border-radius: 10px; margin-bottom: 10px" class="container-height;">
    <div style="display: flex; padding: 10px; ">

      <!--   1 聊天侧边栏   &nbsp;-->
      <div style="width: 14%; margin: 10px auto; order-radius: 20px; ">
        <div style=" padding: 20px; border: 1px solid #ccc; border-radius: 10px; height: 525px; " >
          <!--   自己的头像-->
          <img :src="avatar" alt="" style="width: 60px; height: 60px; border-radius: 50%; margin-left: 10px">
          <div style="padding-top: 35px;padding-left: 25px">
            <router-link tag="div" to="/chat"  class="home-icon" replace>
              <el-icon size="35" color="#333333">
                <ChatDotRound />
              </el-icon>
            </router-link>
          </div>
          <div style="padding-top: 35px;padding-left: 25px">
            <router-link tag="div" to="/userAdd"  class="home-icon" replace>
              <el-icon size="35" color="#333333">
                <User/>
              </el-icon>
            </router-link>
          </div>
<!--          <div style="padding-top: 35px;padding-left: 25px">-->
<!--            <router-link tag="div" to="/item"  class="home-icon" replace>-->
<!--              <el-icon size="35" color="#333333">-->
<!--                <VideoCamera />-->
<!--              </el-icon>-->
<!--            </router-link>-->
<!--          </div>-->
          <!--   退出-->
          <div style="padding-top: 165px;padding-left: 25px"><el-icon size="35" color="#333333"><SwitchButton/></el-icon></div>
        </div>
      </div>
      <router-view></router-view>

    </div>
  </div>


</div>

</template>

<style scoped>
.router-link-active i{
  color:#626aef;
}

</style>